<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度离线版2.0DEMO</title>
<script type="text/javascript" src="js/apiv2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bmap.css"/>
</head>
<body>
点击地图获得焦点经纬度<br/>
焦点经度<input  type="text" name="CLNG" id="CLNG" value="120.13066322374" size="17"/>&nbsp;&nbsp;
焦点维度<input  type="text" name="CLAT" id="CLAT" value="30.240018034923" size="17"/></br>
<input type="button" onclick="clearAll();" value="清除所有"/>
<input type="button" onclick="drawPoint();" value="点击绘制坐标点"/>
<input type="button" onclick="drawLine();" value="点击绘制连线"/>
<div style="width:1040px;height:700px;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP});      //设置卫星图为底图
//map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
map.enableKeyboard();                         // 启用键盘操作。  
//map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
var point = new BMap.Point(120.13066322374, 30.240018034923);    // 创建点坐标
map.centerAndZoom(point,14);                     // 初始化地图,设置中心点坐标和地图级别。
var marker = new BMap.Marker(point);
map.addOverlay(marker);
addInfo();
map.addEventListener("click", function (event){
	document.getElementById("CLNG").value = event.point.lng;
	document.getElementById("CLAT").value = event.point.lat;
});

function drawPoint(){
	var lng = document.getElementById("CLNG").value;
	var lat = document.getElementById("CLAT").value;
	var point = new BMap.Point(lng, lat);    // 创建点坐标
	var marker = new BMap.Marker(point);
	map.addOverlay(marker);
	//addInfo();
	var thePoint = {"lng":lng,"lat":lat,"msg":"hellomap","id":1,"name":"p1"};
	marker.addEventListener("click", function() {
		showInfo(this,thePoint);
	});
	
}

function showInfo(thisMarker,point) {
    //获取点的信息
    var sContent = 
    '<ul style="margin:0 0 5px 0;padding:0.2em 0">'  
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'  
    +'<li style="line-height: 26px;font-size: 15px;">'  
    +'<span style="width: 50px;display: inline-block;">名称：</span>' + point.name + '</li>'  
    +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">'+point.msg+'</span>'  
    +'</ul>';
    var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
    thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}

function clearAll(){
	map.clearOverlays();
}
function drawLine(){
	var points = [  
		{"lng":120.143168,"lat":30.264476,"msg":"point1","id":1,"name":"p1"},  
		{"lng":120.15021,"lat":30.255492,"msg":"point2","id":2,"name":"p2"},  
		{"lng":120.145036,"lat":30.250002,"msg":"point3","id":3,"name":"p3"},
		{"lng":120.131382,"lat":30.24788,"msg":"point4","id":4,"name":"p4"},
		{"lng":120.120027,"lat":30.256491,"msg":"point5","id":5,"name":"p5"},
		{"lng":120.128076,"lat":30.263229,"msg":"point6","id":6,"name":"p6"}
	]; 
	//循环建立标注点
	var mapPoint = [];
    for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
        var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
		mapPoint.push(point);
		var marker;
		if(points[i].id==1){
			var icon = new BMap.Icon('images/marker_green_hd.png', new BMap.Size(20, 32), {//是引用图标的名字以及大小，注意大小要一样
				anchor: new BMap.Size(10, 25)//这句表示图片相对于所加的点的位置
			});
			marker = new BMap.Marker(point,{icon: icon}); //将点转化成标注点
			map.addOverlay(marker);  //将标注点添加到地图上
		}else{
			marker = new BMap.Marker(point); //将点转化成标注点
			map.addOverlay(marker);  //将标注点添加到地图上
		}
        
        //添加监听事件
        (function() {
            var thePoint = points[i];
            marker.addEventListener("click",
                function() {
                showInfo(this,thePoint);
            });
         })();  
    }
	var polyline = new BMap.Polyline(mapPoint, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
	map.addOverlay(polyline);
}

//为多个点添加窗口信息  
function addInfo(){
	var lng = document.getElementById("CLNG").value;
	var lat = document.getElementById("CLAT").value;
	var data_info = [[lng,lat,"您处于：北京市海淀区马甸东路金澳国际公寓1111号"]];
	var opts = {
		width : 250,     // 信息窗口宽度
		height: 80,     // 信息窗口高度
		title : "位置信息" , // 信息窗口标题
		enableMessage:true//设置允许信息窗发送短息
	   }; 
	for(var i=0;i<data_info.length;i++){
		var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
		var content = data_info[i][2];
		map.addOverlay(marker);               // 将标注添加到地图中
		addClickHandler(content,marker);
	}
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}        
}   

</script>
